<script  lang="ts" setup name="Person">
  import useSum from "../hooks/useSum";
  import useDog from "@/hooks/useDog";
  let {sum,addSum,computedSum} = useSum()
  let {dogList,addDog} = useDog()
</script>

<template>
  <div class="prisonBox">
     <h2>当前求和为：{{sum}}乘十{{computedSum}}</h2>
    <button @click="addSum">点击+1</button>

    <br>

    <img v-for="(item,index) in dogList" :src="item" :key="index" alt="">
    <br>
    <button @click="addDog">再来一只小狗</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0 10px;
      }
      img{
        margin-top: 10px;
        margin-right: 10px;
        height: 100px;
      }
    }
</style>